<template>
 <uni-collapse>
    <uni-collapse-item :open="options.open">
      <template v-slot:title>
        <view class="cu-bar bg-white">
          <view class="action">
            <text class="cuIcon-titles text-blue"></text>
            <slot name="header" v-bind:row="columnItems"><text class="pf-bold">{{ options.title }}</text></slot>
          </view>
        </view>
      </template>
      <view class="padding-lr text-df">
        <view class="solid-bottom">
          <view
            v-for="item in columnItems"
            :key="item.key"
            class="margin-top-xs l-row"
          >
            <text class="flex-sub">{{ item.label }}</text>
            <text class="flex-twice text-right">{{ item.value }}</text>
          </view>
          <view class="padding-bottom"></view>
        </view>
      </view>
    </uni-collapse-item>
  </uni-collapse>
</template>

<script>
import { isEmptyObject , deepClone } from "@/utils/util";
function optimize(array) {
  return array.reduce((acc, cur) => {
    for (const key of Object.keys(cur)) {
      if (key === 'value' || key === 'label' || key==="key") continue
      Object.defineProperty(cur, [key], { enumerable: false })
    }
    acc.push(cur)
    return acc
  }, [])
}
export default {
  data() {
    return {
      columnItems: [],
    };
  },
  props: {
    showTitle:Boolean,
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
    isDisplay:{
      type: Boolean,
      default: true,
    }, 
    // 控制列表显示还是详情，默认首列表示
  },
  watch: {
    formData: {
      handler: function (newVal, oldVal) {
        if (!isEmptyObject(newVal)) {
          this.formatData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    onRight(){
      this.$emit("onRight")
    },
    formatData() {
      // console.log('this.options', optimize(this.options.column))
      let columnItems
      if(this.isDisplay){
         columnItems = deepClone(this.options.column.filter((item) => item.display)) ;
      }else{
         columnItems = deepClone(this.options.column.filter((item) => !item.hide)) ;
      }
      let formData = this.formData;
      columnItems.forEach((item) => {
        if (formData.hasOwnProperty(item.key)) {
          if (item.type === "select") {
            let value = formData[item.key];
            item.value =
              item.dicData.find((ele) => ele.value === value)?.label || value;
          } else {
            item.value = formData[item.key] || "/";
          }
        }else{
          item.display = false
        }
      });
      // this.columnItems = columnItems.filter((item) => item.display);
      this.columnItems = columnItems
    },
  },
};
</script>

<style>
.l-row {
  display: flex;
  justify-content: space-between;
  padding-top: 10upx;
  padding-bottom: 10upx;
}
	.scroll-Y {
		max-height: 600rpx;
	}
</style>
